<template>
  <div id="app">
    <!-- 鼠标点击出现波纹特效 -->
    <!-- <div data-tname="WaveItem">
      <div class="main-container">
        <div class="waves">
          <div v-for="(item, key) in waves" :key="key" class="wave" :style="item">
            <div v-for="n in wavesConfig.total" :key="n" class="wave-item" :style="{
                transform: `scale(${0.1 * Math.sqrt(n - 1)})`, // 使得波纹大小指数增长
                opacity: 0.3 * (1 / n), // 因为相互层叠的波纹透明度会相互叠加，需要越小的波纹透明度越低，以免中心颜色过重
                animationDelay: `${(n - 1) * 0.12}s`, // 越大的波纹越晚出现，以呈现波纹逐渐扩散的效果
                animationDuration: `${
                  0.6 + n * 0.3 + parseInt(item.width) * 0.002
                }s`, // 波纹动画时间渐增，表现波纹向外扩散渐慢的效果,波纹尺寸越大动画时间越长。
                backgroundColor: wavesConfig.waveColor,
              }" />
          </div>
        </div>
      </div>
    </div> -->
    <!-- 背景微粒特效 -->
    <!-- <vue-particles
      class="login-background"
      color="#97D0F2"
      :particleOpacity="0.5"
      :particlesNumber="200"
      shapeType="circle"
      :particleSize="5"
      linesColor="#97D0F2"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles> -->
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      waves: [],
      wavesConfig: {
        maxSize: 300, // px，波纹最大尺寸
        minSize: 100, // px，波纹最小尺寸
        zIndexCount: 999, // 波纹父元素其z-index数值
        waveColor: '#3E8CE3', // 波纹基础颜色
        total: 5 // 波纹圈层数
      },
      clear: {
        delay: 5000,
        timeoutId: null
      }
    }
  },
  mounted() {
    document.getElementById('app').onclick = e => {
      this.createWave(e)
      this.intervalClearWave()
    }
  },
  methods: {
    createWave(e) {
      // 让新生成的波纹始终在之前波纹的上层产生叠加效果
      if (this.wavesConfig.zIndexCount > 99999) {
        this.wavesConfig.zIndexCount = 999
      } else {
        this.wavesConfig.zIndexCount++
      }
      // 在一定范围内随机生成波纹的大小
      const waveSize = parseInt(Math.random() * (this.wavesConfig.maxSize - this.wavesConfig.minSize) + this.wavesConfig.minSize)
      // 添加新的波纹数据
      this.waves.push({
        left: `${e.clientX - waveSize / 2}px`,
        top: `${e.clientY - waveSize / 2}px`,
        zIndex: this.wavesConfig.zIndexCount,
        width: `${waveSize}px`,
        height: `${waveSize}px`
      })
    },
    intervalClearWave() {
      clearTimeout(this.clear.timeoutId)
      this.clear.timeoutId = setTimeout(() => {
        this.waves = []
      }, this.clear.delay)
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content {
    margin-top: 5.7rem;
    flex: 1;
  }
}

h3 {
  font-size: 24px;
  padding: 10px 0px;
}
p {
  font-size: 16px;
  line-height: 1.8;
}

.waves {
  .wave {
    position: fixed;
    pointer-events: none; // 点击事件穿透，使得鼠标点击可以穿透波纹，兼容ie11及以上
    @keyframes wave {
      to {
        //波纹逐渐扩散变大变透明
        transform: scale(1);
        opacity: 0;
      }
    }
    .wave-item {
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 100%;
      animation: {
        name: wave;
        fill-mode: forwards; // 动画结束后保持最后一帧的状态
        timing-function: ease-out; // 波纹向外扩散渐缓
      }
    }
  }
}
.login-background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  // z-index: 1;
  z-index: -1;
  position: absolute;
}
</style>
